<template>
  <view class="bg">
    <view class="top_search" v-show="false">
      <u-search
        placeholder="搜索关键词"
        v-model="keyword"
        shape="square"
        bg-color="rgba(255, 255, 255, 1)"
        :show-action="false"
      ></u-search>
      <view class="search_screening" @click="showPopup">
        <image
          src="../../../static/images/common/screening.png"
          mode=""
        ></image>
        <view class="font">筛选</view>
      </view>
    </view>
    <view class="task_bg">
      <view
        v-for="(item, index) in taskArr"
        :key="index"
        class="task_one"
        @tap="details(index)"
      >
        <view class="task_left_top">
          <view class="task_round">
            <image src="../../../static/images/common/task.png" mode=""></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="task_content">
          <view class="task_name">
            <view class="task_left">任务名称</view>
            <view class="task_right nameFont">{{ item.rwmc }}</view>
          </view>
          <view class="task_child">
            <view class="task_test">
              <view class="task_left">任务内容</view>
              <view class="task_right childFont">{{ item.rwnr }}</view>
            </view>

            <view class="task_test">
              <view class="task_left">任务派发</view>
              <view class="task_right childFont">{{ item.xbdw }}</view>
            </view>
            <view class="task_test">
              <view class="task_left">派发时间</view>
              <view class="task_right childFont">
                <text>{{ item.rwsx }}</text>
                <view class="zt_type2" v-show="item.ztType === '0'"
                  >待审批</view
                >
                <view class="zt_type3" v-show="item.ztType === '1'"
                  >审批未通过</view
                >
                <view class="zt_type3" v-show="item.ztType === '2'"
                  >正常待完成</view
                >
                <view class="zt_type3" v-show="item.ztType === '3'"
                  >新反馈</view
                >
                <view class="zt_type3" v-show="item.ztType === '4'"
                  >已完成</view
                >
                <view class="zt_type3" v-show="item.ztType === '9'"
                  >待立项</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="show" mode="top">
      <view class="popupBg">
        <view class="title">状态</view>
        <view class="btn_flex">
          <view
            v-for="(item, index) in stateArr"
            :key="index"
            class="btn3"
            :class="index === stateIndex ? 'btnSelected' : 'btnUnSelected'"
            @click="changeStateIndex(index)"
            >{{ item }}</view
          >
        </view>
        <view class="title">事项类型</view>
        <view class="btn_flex">
          <view
            v-for="(item, index) in typeArr"
            :key="index"
            class="btn45"
            :class="index === typeIndex ? 'btnSelected' : 'btnUnSelected'"
            @click="changeTypeIndex(index)"
            >{{ item }}</view
          >
        </view>
      </view>
      <view class="bottom_btn">
        <view class="left_btn" @click="reset">重置</view>
        <view class="right_btn" @click="determine">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getMaintasklist } from "../../../request/dcxt";
export default {
  data() {
    return {
      stateArr: ["全部", "进行中", "已完成"],
      stateIndex: 0,
      typeArr: [
        "全部",
        "会议纪要",
        "省市县为人民办实事",
        "省市县政府工作报告",
        "政协提案办理",
        "书记、县长批示件",
        "人大建议办理",
        "文件办理告知单",
        "县委交办事项",
        "其他事项",
        "单位重大事项",
        "办公室内部事务管理",
      ],
      typeIndex: 0,
      taskArr: [],
      keyword: "",
      show: false,
      content: "东临碣石，以观沧海",
    };
  },
  onLoad() {
    this.getData();
  },
  methods: {
    reset() {
      this.stateIndex = 0;
      this.typeIndex = 0;
    },
    plane() {
      this.show = true;
    },
    details(index) {
      uni.navigateTo({
        url: "../taskDetails/index?info=" + JSON.stringify(this.taskArr[index]),
      });
    },
    showPopup() {
      this.show = true;
    },
    determine() {
      this.show = false;
    },
    changeStateIndex(index) {
      this.stateIndex = index;
    },
    changeTypeIndex(index) {
      this.typeIndex = index;
    },
    getData() {
      var params = { loginerId: uni.getStorageSync("loginId") };
      getMaintasklist(params).then((res) => {
        console.log(res.data.data);
        var result = res.data.data;
        var arr = [];
        for (let i = 0; i < result.length; i++) {
          arr.push({
            name: result[i].categoryName
              .replace("&ldquo;", "")
              .replace("&rdquo;", ""),
            rwmc: result[i].mainName
              .replace("&ldquo;", "")
              .replace("&rdquo;", ""),
            rwnr: result[i].content,
            ztType: result[i].status,
            xbdw: result[i].createUserName ? result[i].createUserName : "",
            rwsx: result[i].timeLimit,
            sysId: result[i].sysId,
            imp: result[i].imp,
          });
        }
        this.taskArr = JSON.parse(JSON.stringify(arr));
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popupBg {
  padding: 20rpx 30rpx 0 30rpx;

  .title {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-bottom: 20rpx;
  }

  .btn_flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .btnSelected {
      background: #3074ff;
      border-radius: 6px;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16rpx 0;
      margin-bottom: 30rpx;
    }

    .btnUnSelected {
      background: rgba(246, 247, 250, 1);
      border-radius: 6px;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(39, 43, 50, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16rpx 0;
      margin-bottom: 30rpx;
    }

    .btn3 {
      width: 30%;
    }
    .btn45 {
      width: 45%;
    }
  }
}

.bottom_btn {
  width: 100vw;
  height: 98rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left_btn {
    width: 50%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8e9cb3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right_btn {
    width: 50%;
    height: 100%;
    background: rgba(48, 116, 255, 1);
    border: 1px solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(254, 254, 254, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.top_search {
  width: 100vw;
  height: 120rpx;
  background-color: #3988ff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .search_screening {
    margin-left: 2%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.popupModel {
  position: relative;
  padding-top: 48rpx;

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 999;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .popupContent {
    padding: 24rpx;

    .Content {
      width: 100%;
      display: flex;
      align-items: center;

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }
    }
  }
}

.task_bg {
  // margin-top: 120rpx;

  .task_one {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx;
    position: relative;
    margin-bottom: 40rpx;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 24rpx 8rpx 8rpx 8rpx;
  }

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 230rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 5;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .task_content {
    width: 100%;
    margin-top: 40rpx;

    .task_btnArr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;
    }

    .task_btn {
      background: #3074ff;
      border-radius: 4rpx;
      padding: 8rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .more {
        width: 24rpx;
        height: 6rpx;
        margin-right: 10rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .task_name {
      display: flex;
      padding-bottom: 40rpx;
    }

    .task_child {
      padding: 20rpx 0;
      border-top: 1rpx solid rgba(231, 233, 240, 1);
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    }

    .task_test {
      display: flex;
      margin: 20rpx 0;
    }

    .task_left {
      flex: 2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .nameFont {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .task_right {
      flex: 7;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .childFont {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }

      .zt_type1 {
        margin-left: 10rpx;
        background: #f85f78;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type2 {
        margin-left: 10rpx;
        background: rgba(250, 173, 51, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 6rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type3 {
        margin-left: 10rpx;
        background: rgba(31, 211, 183, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 6rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
